<template>
  <view class="index_warp">
    <view class="integral_warp">
      <view class="integral_item">
        <view class="integral_title">剩余积分: </view>
        <view class="integral_num">{{ coin }}</view>
      </view>
    </view>
    <view class="integral_warp">
      <view class="title">请选择充值</view>
      <view class="item_content">
        <view
          class="item"
          v-for="item in list"
          :key="item.id"
          :class="
            czItem.rechargeValue === item.rechargeValue ? 'cz-click' : 'cz-item'
          "
          @click="changeCzitem(item)"
        >
          <view class="flex_left">
            <view class="iconfont icon-gold"></view>
            <view class="font-14">{{ item.rechargeValue }}</view>
          </view>
          <view class="font-12">￥{{ item.rechargePrice }}</view>
        </view>
      </view>
      <view class="pay_type" v-if="isShow">
        <view class="title">请选择支付方式</view>
        <radio-group @change="radioChange">
          <label
            class="label"
            v-for="(item, index) in payType"
            :key="item.value"
          >
            <radio :value="item.value" :checked="index === current" />
            {{ item.name }}
          </label>
        </radio-group>
      </view>
      <view class="cz-btn" @click="clickBtn"
        >支付 ￥{{ czItem.rechargePrice }}</view
      >
    </view>
  </view>
</template>

<script>
import {
  listRechargeInfo,
  wxpayCreateOrder,
  wxpayNotifyOrder,
  wxpayNotifyRefund,
  alipayCreateOrder,
  alipayNotifyOrder,
} from "@/api/buy";
export default {
  data() {
    return {
      czItem: {
        gold: 6,
        money: 4.2,
      },
      current: 0,
      payType: [
        {
          name: "微信支付",
          value: "wechat",
        },
        {
          name: "支付宝支付",
          value: "alipay",
        },
      ],
      coin: 0,
      list: [],
      isShow: false,
    };
  },
  onLoad() {
    this.listRechargeInfo();
    // #ifdef  MP-ALIPAY
    this.current = 1;
    // #endif
    // #ifndef MP-WEIXIN || MP-ALIPAY
    this.isShow = true;
    // #endif
  },
  methods: {
    listRechargeInfo() {
      listRechargeInfo({
        type: 0,
      }).then((res) => {
        this.coin = res.coin;
        this.czItem = res.rechargeConfigList[0];
        this.list = res.rechargeConfigList;
      });
    },
    // 点击充值项
    changeCzitem(item) {
      this.czItem = item;
    },
    // 点击支付
    clickBtn() {
      const { current } = this;
      // #ifndef  H5
      if (current === 0) {
        // 微信支付
        this.wxpayCreateOrder();
      } else {
        // 支付宝支付
        this.alipayCreateOrder();
      }
      // #endif
      // #ifdef H5
      if (current === 0) {
        // 微信支付
        this.wxpayCreateOrder();
      } else {
        // 支付宝支付
        this.alipayCreateOrder();
      }
      // #endif
    },
    // 支付宝支付
    alipayCreateOrder() {
      alipayCreateOrder({
        itemId: this.czItem.id,
      }).then((res) => {
        console.log("wxpayCreateOrder", res);
        uni.requestPayment({
          provider: "alipay",
          orderInfo: res.body, //支付宝订单数据（string类型）
          success: (res) => {
            console.log(res);
            this.$ShowToast({ title: "支付成功" });
          },
          fail: (err) => {
            this.$ShowToast({ title: "支付失败，请稍后再试" });
          },
        });
      });
    },
    // 微信支付
    wxpayCreateOrder() {
      wxpayCreateOrder({
        itemId: this.czItem.id,
      }).then((res) => {
        console.log("wxpayCreateOrder", res);
        uni.requestPayment({
          provider: "wxpay",  
          orderInfo: res, //微信订单数据（Object类型）
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.prepayId,
          signType: "MD5",
          paySign: res.sign,
          appId: res.appId,
          partnerId: res.partnerId,

          success: (res) => {
            console.log(res);
            this.$ShowToast({ title: "支付成功" });
          },
          fail: (err) => {
            console.log(err);
            this.$ShowToast({ title: "支付失败，请稍后再试" });
          },
        });
      });
    },
    // 切换支付方式
    radioChange(evt) {
      for (let i = 0; i < this.payType.length; i++) {
        if (this.payType[i].value === evt.detail.value) {
          this.current = i;
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index_warp .detail_warp {
  width: 750upx;
  background: linear-gradient(121deg, #0058a3 0%, #46009d 100%);
  opacity: 1;
  display: flex;
  flex-direction: column;
  padding: 30upx;
}
.index_warp .detail_warp .detail_item_title {
  font-size: 24upx;
  font-weight: 500;
  color: #ffffff;
}
.index_warp .detail_warp .detail_item_num {
  font-size: 46upx;
  font-weight: 800;
  color: #ffffff;
}
.index_warp .detail_warp .detail_item_btn {
  width: 150upx;
  height: 60upx;
  background: #ffffff;
  opacity: 1;
  border-radius: 34upx;
  font-size: 28upx;
  font-weight: 800;
  color: #0058a3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.index_warp .integral_warp {
  margin-top: 30upx;
  background: #ffffff;
  padding: 30upx;
  .integral_item {
    display: flex;
    align-items: center;
    .integral_title {
      font-size: 36upx;
      flex-wrap: 600;
    }
    .integral_num {
      font-size: 36upx;
      flex-wrap: 600;
      margin-left: 10upx;
      color: #f97622;
    }
  }
  .title {
    font-size: 36upx;
    flex-wrap: 600;
    padding-bottom: 20upx;
    border-bottom: 2upx solid #ccc;
    margin-bottom: 20upx;
  }
}

.item_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 320upx;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20upx;
    .flex_left {
      display: flex;
      align-items: center;
      .iconfont {
        color: #f97622;
      }
      .font-14 {
        font-size: 28upx;
        margin-left: 10upx;
      }
    }
  }
}
.pay_type {
  margin-top: 20upx;
  .title {
    font-size: 36upx;
  }
  .label {
    display: block;
    width: 100%;
    height: 60upx;
    display: flex;
    align-items: center;
  }
}

.cz-item {
  padding: 20upx;
  border: 1px #ccc solid;
  color: #353535;
  margin: 0 4upx;
  border-radius: 80upx;
}
.cz-click {
  padding: 20upx;
  border: 1px #353535 solid;
  background-color: #f5f7f5;
  color: #0058a3;
  margin: 0 4upx;
  border-radius: 80upx;
}
.cz-btn {
  margin: 60upx 0 0 0;
  background-color: #0058a3;
  color: #fff;
  border-radius: 80upx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20upx;
}
</style>
